<template>
	<view class="main">
		<my-navbar></my-navbar>
		<view class="filter-box">
			<picker mode="selector" :range="villagesList" range-key="value" @change="onChangePicker">
				<view class="select-box">
					<view class="select-text u-line-1">{{ getVillageName }}</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</picker>

			<view class="search-box"><u-search placeholder="请输入您想查找的内容" v-model="searchKey" @search="handleSearch" @custom="handleSearch"></u-search></view>
		</view>
		<view class="content-box">
			<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<template v-for="item in tableFields">
							<uni-th align="center" :key="item.Id" v-if="item.IsShow">{{ item.Title }}</uni-th>
						</template>
						<uni-th width="50" align="center">操作</uni-th>
						<!-- <uni-th align="center" v-if="tableFields[1] && tableFields[1].IsShow">{{ tableFields[1].Title }}</uni-th>
						<uni-th width="120" align="center" v-if="tableFields[2] && tableFields[2].IsShow">{{ tableFields[2].Title }}</uni-th> -->
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="item in dataList" :key="item.Id">
						<template v-for="field in tableFields">
							<uni-td align="center" :key="field.Id" v-if="field.IsShow">
								<text class="name-text" @click="onShowModal(item)" v-if="field.Name === 'Id'">{{ item[field.Name] }}</text>
								<text v-else>{{ item[field.Name] }}</text>
							</uni-td>
						</template>
						<uni-td width="50" align="center"><text class="name-text" @click="onShowModal(item)">查看</text></uni-td>
						<!-- <uni-td align="center" v-if="tableFields[0] && tableFields[0].IsShow">
							<text class="name-text" @click="onShowModal(item)">{{ item.Id }}</text>
						</uni-td>
						<uni-td align="center" v-if="tableFields[1] && tableFields[1].IsShow">{{ item.ZL }}</uni-td>
						<uni-td align="center" v-if="tableFields[2] && tableFields[2].IsShow">{{ Number(item.ZDMJ).toFixed(2) }}（m²）</uni-td> -->
					</uni-tr>
				</uni-table>
			</mescroll-uni>
		</view>
		<my-modal-verify v-model="showModalVerify" @click-verify="onClickVerify" @confirm="goDetail"></my-modal-verify>
		<my-modal-verifysubmit v-model="showModalVerifySubmit"></my-modal-verifysubmit>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { apiLogin, apiLoadGridData, apiAuth } from '@/common/api.js';
import { showErrorTips } from '@/util/index.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			searchKey: '',
			villagesList: [
				{
					key: '0',
					value: '选择乡镇'
				},
				{
					key: '1',
					value: '里仁镇'
				},
				{
					key: '2',
					value: '秒泉镇'
				},
				{
					key: '3',
					value: '清溪场'
				},
				{
					key: '4',
					value: '大溪乡'
				},
				{
					key: '5',
					value: '海洋乡'
				},
				{
					key: '6',
					value: '超长测试超长测试超长测试超长测试'
				}
			],
			dataList: [],
			tableFields: [],
			itemData: {},
			upOption: {
				page: {
					size: 20
				}
			},
			villageIndex: 0,
			showModalVerify: false,
			showModalVerifySubmit: false
		};
	},
	computed: {
		getVillageName() {
			return this.villagesList[this.villageIndex].value;
		}
	},
	onLoad() {
		apiLogin();
	},
	methods: {
		upCallback(page) {
			let offset = -20;
			apiLoadGridData({
				MorphologyId: 6107,
				GroupId: 4025,
				offset: (page.num - 1) * page.size,
				limit: page.size,
				qlr: this.searchKey,
				order: 'asc'
			})
				.then(res => {
					let curPageData = res.Items;
					let curPageLen = curPageData.length;
					let totalSize = res.Totals;
					this.tableFields = res.Fields;
					if (page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					this.mescroll.endBySize(curPageLen, totalSize);
				})
				.catch(err => {
					this.mescroll.endErr();
				});
		},
		onChangePicker(e) {
			const oIndex = parseInt(e.detail.value);
			this.villageIndex = oIndex;
		},
		onClickVerify() {
			// this.showModalVerify = false;
			// this.showModalVerifySubmit = true;
			uni.showToast({
				icon: 'none',
				title: '功能开发中...'
			});
		},
		onShowModal(item) {
			this.itemData = item;
			this.showModalVerify = true;
		},
		goDetail(form) {
			const recordId = this.itemData.Id;
			const oForm = {
				...form,
				id: recordId
			};
			uni.showLoading();
			apiAuth(oForm)
				.then(res => {
					const { isSuccess } = res;
					this.showModalVerify = false;
					uni.hideLoading();
					if (isSuccess) {
						uni.navigateTo({
							url: `/pages/subpage/detail/detail?id=${recordId}`
						});
					} else {
						showErrorTips('身份验证失败!');
					}
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		handleSearch() {
			console.log(this.searchKey);
			this.mescroll.resetUpScroll(true);
		}
	}
};
</script>
<style>
page {
	height: 100%;
	/* #ifdef MP-ALIPAY || MP-DINGTALK*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* #endif */
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
/deep/ .uni-table {
	min-width: 0 !important;
}
</style>
<style lang="scss" scoped>
.main {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.filter-box {
	display: flex;
	align-items: center;
	padding: 0 $uni-spacing-row-lg;
	padding-bottom: $uni-spacing-row-lg;

	.select-box {
		display: flex;
		align-items: center;
		padding-right: $uni-spacing-row-lg;

		.select-text {
			padding-right: $uni-spacing-row-sm;
			width: 120rpx;
		}
	}

	.search-box {
		flex: 1;
	}
}

.content-box {
	flex: 1;
	min-width: 0;
	min-height: 0;
	padding: 0 $uni-spacing-row-lg;

	.name-text {
		color: $u-type-success;
		text-decoration: underline;
	}
}
</style>
